<!--
 * @Description: 新增|修改 弹窗
 * @Version: 1.0
 * @Author: yxx
 * @Date: 2023-09-22 09:27:50
 * @LastEditors: yxx
 * @LastEditTime: 2025-05-21 16:12:49
-->
<template>
  <div class="dialog-container">
    <el-dialog :title="title" v-model="isDialog" width="700px" :close-on-click-modal="false" @close="handleCancel">
      <el-form :model="ruleForm" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级部门">
              <el-tree-select
                v-model="ruleForm.pid"
                :data="parentTree"
                node-key="id"
                check-strictly
                default-expand-all
                :render-after-expand="false"
                :expand-on-click-node="false"
                :check-on-click-node="true"
                :props="treeProps"
                style="width: 230px"
              >
                <template #default="{ data: { name } }"> {{ name }}</template>
              </el-tree-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门名称">
              <el-input v-model="ruleForm.name" placeholder="部门名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序">
              <el-input-number v-model="ruleForm.sort" :min="1" :max="9999" controls-position="right"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="部门领导">
              <el-input v-model="ruleForm.leader" placeholder="部门领导"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="status" label="部门状态">
              <el-radio-group v-model="ruleForm.status">
                <el-radio :value="item.value" v-for="(item, index) in statusOptions" :key="index">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系方式">
              <el-input v-model="ruleForm.phone" placeholder="联系方式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱地址">
              <el-input v-model="ruleForm.email" placeholder="邮箱地址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { ElMessage } from "element-plus"
import { addDeptApi } from "@/api/modules/system"
import { SystemSpace } from "@/api/interface/system"
import { statusOptions } from "@/utils/dict"

const emit = defineEmits(["refreshData"])
const title = ref<string>("新增")
const isDialog = ref<boolean>(false)
const treeProps = {
  label: "name",
  value: "id"
}
const parentTree = ref<any[]>([])
const ruleForm = ref<SystemSpace.DeptAdd>({
  id: undefined,
  pid: 0,
  name: "",
  sort: 1,
  leader: "",
  phone: "",
  email: "",
  status: 0
})

/** 弹窗 打开 */
const handleOpen = (str: string) => {
  isDialog.value = true
  title.value = str + "部门"
}
/** 按钮 确定 */
const handleConfirm = async () => {
  if (ruleForm.value.id === ruleForm.value.pid) {
    ElMessage.warning("上级部门不能与当前部门相同！")
    return
  }
  await addDeptApi(ruleForm.value)
  ElMessage.success("操作成功！")
  emit("refreshData")
  handleCancel()
}
/** 按钮 取消 */
const handleCancel = () => {
  resetForm()
  isDialog.value = false
}
/** 重置 表单 */
const resetForm = () => {
  ruleForm.value = {
    id: undefined,
    pid: 0,
    name: "",
    sort: 1,
    leader: "",
    phone: "",
    email: "",
    status: 0
  }
}

defineExpose({ ruleForm, parentTree, handleOpen })
</script>

<style scoped lang="scss"></style>
